<template>
	<view class="ways">
		<view class="way" :class="activeWay=='inspect'?'active':''" @click="handleWays('inspect')">
			<image class="normal" v-if="activeWay=='inspect'" src="/static/menuIcon/inspect-a.png" mode="" />
			<image class="normal" v-else src="/static/menuIcon/inspect.png" mode="" />
			<text>报验</text>
		</view>
		<view class="way" :class="activeWay=='build'?'active':''" @click="handleWays('build')">
			<image class="normal" v-if="activeWay=='build'" src="/static/menuIcon/build-a.png" mode="" />
			<image class="normal" v-else src="/static/menuIcon/build.png" mode="" />
			<text>施工</text>
		</view>
		<view class="way" :class="activeWay=='notice'?'active':''" @click="handleWays('notice')">
			<image class="normal" v-if="activeWay=='notice'" src="/static/menuIcon/notice-a.png" mode="" />
			<image class="normal" v-else src="/static/menuIcon/notice.png" mode="" />
			<text>通知</text>
		</view>
		<view class="way" :class="activeWay=='mine'?'active':''" @click="handleWays('mine')">
			<image class="normal" v-if="activeWay=='mine'" src="/static/menuIcon/mine-a.png" mode="" />
			<image class="normal" v-else src="/static/menuIcon/mine.png" mode="" />
			<text>我的</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TabBar",
		props: {
			activeWay: '',
		},
		data() {
			return {

			};
		},
		methods: {
			handleWays(type) {
				getApp().globalData.currentMenu = type
				if (type == 'inspect') {
					uni.redirectTo({
						url: '/pages/tabPage/inspect/inspect'
					})
				} else if (type == 'build') {
					uni.redirectTo({
						url: '/pages/tabPage/build/build'
					})
				} else if (type == 'notice') {
					uni.redirectTo({
						url: '/pages/tabPage/notice/notice'
					})
				} else if (type == 'mine') {
					uni.redirectTo({
						url: '/pages/tabPage/mine/mine'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.ways {
		width: 100%;
		height: 10vh;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		padding: 0 5%;
		justify-content: space-around;
		// height: 100rpx;
		// margin-top: 80rpx;
		// background-color: #77ff62;

		.way {
			// width: 25%;
			color: rgba(166, 166, 166, 1);
			text-align: center;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding:40rpx 20rpx;
			text{
				font-size: 24rpx;
			}
			.normal {
				// display: block;
				width: 49rpx;
				height: 48rpx;
				margin-bottom: 10rpx;
			}
		}

		.active {
			color: rgba(82, 177, 255, 1);
			background-image: url(/static/menuIcon/tabLine.png);
			background-size: contain;
			background-repeat: no-repeat;
		}
	}
</style>